<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css}">

</head>
<!--<body>-->
<!--（1）MQTT服务器配置页面-->
<!--（2）TCP服务器配置页面-->
<!--（3）串口配置-->
<!--</body>-->
<body>
<div class="layuimini-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>网关列表</legend>
    </fieldset>
    <div class="layuimini-main">
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal  data-count-see" lay-event="see">查看</a>
        </script>

    </div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/jquery.min.js}" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        table.render({
            elem: '#currentTableId',
            url: '/clientlist',
            method:'get',
            cols: [
                [
                    {field: 'address', width: 650, title: 'IP&Port'},
                    {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                ]
            ],
            parseData: function (res) {
                return {
                    "code":    "0", //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count":res.size, //解析数据长度
                    "data": res.list //解析数据列表
                };
            },
            // limits: [6, 12, 18, 24, 50, 100,1000000],
            // limit: 6,
            page: {layout: [ 'refresh']
            },
            loading: true,
            skin: 'line'
        });
        //定时刷新
        var timer2 = setInterval(function () {
            $(".layui-icon-refresh").click();
        }, 10000);


        /**
         * toolbar监听事件
         */
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'see') {
                // alert(data.field.address)
                window.location.href='/show/'+data.address;

                return false;

            }
        });
    });
</script>
</body>
</html>
